<template>
    <div class="order-contain">
        <!-- <div class="header bg-grey">
            <div class="header-left">
                <div class="back" @click="handleReturn">
                    <i class="i-left"></i>
                </div>
            </div>
            <div class="header-middle m-l-12"><span class="font-black">订单列表</span></div>
            <div class="header-right">
                
            </div>
        </div> -->
        <!-- <div class="van-search">
            <div class="van-search__content van-search__content--square">
                <div class="van-cell van-cell--borderless van-field">
                    <div class="van-field__left-icon"><i class="van-icon van-icon-search"></i></div>
                    <div class="van-cell__value van-cell__value--alone">
                        <div class="van-field__body">
                            <input type="search" placeholder="搜索商品名称/订单号/商品编号" class="van-field__control">
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
            <van-list v-model="isUploading" :finished="finished"  :finished-text="finished_text" @load="onLoad" :offset=10>
                <div class="order-list-goods" v-for="val of list">
                    <router-link :to="'/order/detail/'+val.orderInfo.id">
                        <div class="order-list-goods__header">
                        <span></span>
                        <!--<span class="header-item"><span class="title">莲蕊珠宝</span> <img src="../../assets/images/i-right.png"/></span>-->
                        <span class="header-item">{{handleStatus(val.orderInfo.pay_status,val.orderInfo.shipping_status,val.orderInfo.order_status)}}</span>
                    </div>
                    <!--<router-link :to="'/detail/'+val.goods_id">-->
                        <div class="order-list-goods__contain" v-for="goods in val.goodsInfo">
                            <div class="order-list-goods__thumb"><img v-lazy="imageShow(goods.list_pic_url)" ></div>
                            <div class="order-list-goods__content">
                                <div class="order-list-goods__title">商品名称:</div>
                                <div class="order-list-goods__desc">{{goods.goods_name}}</div>
                                <div class="order-list-goods__price">¥ {{goods.retail_price}}</div>
                                <div class="order-list-goods__total">
                                    <span>共{{val.orderInfo.goodsCount}}件</span>
                                    <span>合计:</span>
                                    <span>￥{{val.orderInfo.all_price}}</span>
                                </div>
                            </div>
                        </div>
                    <!--</router-link>-->
                    </router-link>
                    <div class="order-list-goods__bottom" v-if="val.orderInfo.pay_status === 0">
                        <div class="left">
                            <div>{{val.orderInfo.order_sn}}</div>
                            <div>{{val.orderInfo.add_time}}</div>
                        </div>
                        <div class="right" v-if="val.orderInfo.order_status===101 || val.orderInfo.order_status===103">
                            <button  class="button btn-red" @click="handleBuyAgain(val.orderInfo.goods_id)">再次购买</button>
                        </div>
                        <div class="right" v-else>
                            <button  class="button" @click="handleCancelOrder(val.orderInfo.id)">取消订单</button>
                            <button  class="button btn-red" @click="handlePayShow(val.orderInfo.id,val.orderInfo.all_price, val.orderInfo.changePayment)">去支付</button>
                        </div>
                    </div>
                    <div class="order-list-goods__bottom" v-else-if="val.orderInfo.pay_status === 1">
                        <div class="left">
                            <div>{{val.orderInfo.order_sn}}</div>
                            <div>{{val.orderInfo.add_time}}</div>
                        </div>
                        <div class="right" v-if="val.orderInfo.order_status===101 || val.orderInfo.order_status===103">
                            <!--<button  class="button" @click="handleDeleteOrder(val.id)">删除订单</button>-->
                            <button  class="button btn-red" @click="handleBuyAgain(val.orderInfo.goods_id)">再次购买</button>
                        </div>
                        <div class="right" v-else>
                            <button  class="button" @click="handleCancelOrder(val.orderInfo.id)">取消订单</button>
                            <button  class="button btn-red" @click="handlePayShow(val.orderInfo.id,val.orderInfo.all_price,val.orderInfo.changePayment)">去支付</button>
                        </div>
                    </div>
                    <div class="order-list-goods__bottom" v-else-if="val.orderInfo.pay_status === 2">
                        <div class="left">
                            <div>{{val.orderInfo.order_sn}}</div>
                            <div>{{val.orderInfo.add_time}}</div>
                        </div>
                        <div class="right">
                            <button  class="button" @click="handleShipping(val)">查看物流</button>
                            <button  class="button btn-red" v-if="val.orderInfo.shipping_status===1" @click="handleConfirm(val.orderInfo.id)">确定收货</button>
                        </div>
                    </div>
                    <div class="order-list-goods__bottom" v-else>
                        <div class="left">
                            <div>订单号:{{val.orderInfo.order_sn}}</div>
                            <div>{{val.orderInfo.add_time}}</div>
                        </div>
                    </div>
                    <!--<div class="order-list-goods__bottom" v-else-if="isExist(val.order_status,statusSend)">-->
                        <!--<button  class="button">查看物流</button>-->
                        <!--<button  class="button btn-red">确定收货</button>-->
                    <!--</div>-->

                </div>
            </van-list>
        </van-pull-refresh>
        <van-action-sheet v-model="isPay" title="确认付款"   @cancel="handleCancel">
            <pay :totalPrice="totalPrice" :orderId="orderId" :channelId = channelId @pay-result="paySuccess"></pay>
        </van-action-sheet>
    </div>
</template>

<script>
import pay from "@/components/pay"
import { getOrderList,orderPay,orderConfirm,orderCancel } from "@/api/goods"
import { url, autoLogin, shppingSupport } from "@/utils";
import { Dialog,Toast } from 'vant'

export default {
    name: "order",
    components: { pay },
    data() {
        return {
            channelId: '',
            list: [],
            isPay: false,
            pay_type: "2",
            orderId: 0,
            totalPages: 1,
            isFirst: true,
            icon: {
                normal: require('@/assets/images/radio-normal.png'),
                active: require('@/assets/images/radio-active.png')
            },
            totalPrice: 0,
            changePayment: 0,//元宝购买
            finished_text: '没有更多了',
            statusCancel: [101,102,103],
            statusSend: [201,300],
            isDownLoading: false,
            isUploading: false,
            finished: false,
            query: {
                page: 0,
                limit: 10,
                order: "desc",
                channelId: '',
                orderStatus: '',
                sidx: ""
            }
        }
    },
    created(){
        autoLogin()
        this.channelId = this.$route.query.channelId
        this.query.channelId = this.channelId ? this.channelId : ''
        this.query.orderStatus = sessionStorage.getItem('orderStatus') ?  sessionStorage.getItem('orderStatus') : ''
    },
    methods: {
        async getList(){
            await getOrderList(this.query).then(response => {
                if(this.isFirst){
                    this.isFirst = false
                    this.totalPages = response.data.totalPages
                }
                if(this.list.length) {
                    if (this.isUploading) { //上拉加载
                        if(response.data.data) {
                            for (const item of response.data.data) {
                                this.list.push(item)
                            }
                        }
                        this.$nextTick(() => {
                            this.isUploading = false
                        })
                        if (this.list.length >= response.data.count) {
                            this.isUploading = false
                            this.finished = true
                        }
                    }

                    if (this.isDownLoading) { //关闭下拉刷新
                        this.isDownLoading = false
                        this.isUploading = false
                        this.list = [];
                        if(response.data.data) {
                            for (const item of response.data.data) {
                                this.list.push(item)
                            }
                        }
                        if (this.finished) {
                            this.finished = false
                        }
                    }
                }
                else{
                    if(response.data.data) {
                        for( const item of response.data.data){
                            this.list.push(item)
                        }
                        if(response.data.count === 0) {
                            this.finished_text = "暂无数据"
                            this.finished = true
                        }
                        if (this.list.length >= response.data.count) {
                            this.finished = true
                        }
                    }
                    this.isUploading = false
                }
            })
        },
        onLoad() {
            if(this.query.page < this.totalPages){
                this.query.page = this.query.page + 1
                this.isUploading = true
                this.getList()
            }else {
                this.finished = true
                this.isDownLoading = false
                this.isUploading = false
            }

        },
        onRefresh() {
            // this.isDownLoading = false
            // this.finished = false
            // this.isDownLoading = true
            // this.isUploading = false
            this.finished = false
            this.query.page = 1
            this.getList()
        },
        imageShow(src){
            const img = {}
            img.loading = require('@/assets/images/loading.gif');
            img.src = src;
            return img
        },
        handleStatus(pay_status,shipping_status,order_status) {
            var statusStr = "";
            switch (pay_status){
                case 0:
                    statusStr = "未付款";
                    if(order_status===101){
                        statusStr = "已取消"
                    }else if(order_status===103){
                        statusStr = "已失效"
                    }
                    break;
                case 1:
                    statusStr = "未付款";
                    if(order_status===101){
                        statusStr = "已取消"
                    }
                    break;
                case 2:
                    //0未发货,1已发货,2已收货,4退货
                    statusStr = "已付款";
                    if(shipping_status === 0){
                        statusStr = "未发货";
                    }else if(shipping_status === 1){
                        statusStr = "已发货";
                    }else if(shipping_status === 2){
                        statusStr = "已收货";
                    }
                    break;
                case 4:
                    statusStr = "退款";
                    break;
            }
            return statusStr;
        },
        handleShipping(obj){
            if(obj.orderInfo.shipping_no){
                if(shppingSupport(obj.orderInfo.shipping_id)){
                    this.$router.push('/shipping/' + obj.orderInfo.id)
                }
                else {
                    Dialog.alert({
                        title: "",
                        message: "<div style='text-align: center'>" +
                                    "<div style='text-align: left;width: 75%;margin: 0 auto;'>请到物流官网查询：</div>" +
                                    "<div style='text-align: left;width: 75%;margin: 0 auto;'>发货物流："+obj.orderInfo.shipping_name+"</div>" +
                                    "<div style='text-align: left;width: 75%;margin: 0 auto;'>物流单号："+obj.orderInfo.shipping_no+"</div>" +
                                "</div>"
                    }).then(() => {
                    })
                }
            } else{
                Dialog.alert({
                    title: "",
                    message: "暂无物流信息"
                }).then(() => {
                })
            }
        },
        handleConfirm(orderId){
            const data = {}
            data.orderId = orderId
            orderConfirm(data).then(respone=>{
                if(respone.errno===0){
                    Dialog.alert({
                        title: "",
                        message: "确认收货成功"
                    }).then(() => {
                        this.list = []
                        this.finished = false
                        this.query.page = 1
                        this.getList()
                    })
                }
            })
        },
        handleCancelOrder(orderId){
            const data = {}
            data.orderId = orderId
            orderCancel(data).then(respone=>{
                if(respone.errno===0){
                    Dialog.alert({
                        title: "",
                        message: "取消成功"
                    }).then(() => {
                        this.list = []
                        this.finished = false
                        this.query.page = 1
                        this.getList()
                    })
                }
            })
        },
        handleBuyAgain(orderId){
           this.$router.push('/detail/'+orderId)
        },
        handlePayShow(order_id,price, money){
            this.orderId = order_id
            this.totalPrice = price
            this.changePayment = money
            this.isPay = true
        },
        handleCancel(){
            this.isPay = false
            // this.$router.go(0)
        },
        paySuccess() {
            this.isPay = false
            this.list = []
            this.finished = false
            this.query.page = 1
            this.getList()
        },
        handleReturn(){
            if(this.channelId) {
                this.$router.go(-1)
            } else {
                this.$router.push('/user/index')
            }

        }
    }
}
</script>
